<template>
    <div class="Order">
        <!-- 头部信息-------------------- -->
        <div class="Orderheader">
            <p class="actived">全部订单</p>
            <p>未付款</p>
            <p>已付款</p>
            <p>交易中</p>
            <p>已完成</p>
        </div>
        <div class="Orderth">
            <el-row>
                <el-col :span="7"><p>订单详情</p></el-col>
                <el-col :span="4"><p>价格</p></el-col>
                <el-col :span="4"><p>数量</p></el-col>
                <el-col :span="4"><p>订单状态</p></el-col>
                <el-col :span="5"><p>客服信息</p></el-col>
            </el-row>
        </div>
        <!-- 订单列表--------------------------------------- -->
        <div class="Orderlist">
            <div class="listheader">
                <span>2019-12-43  3242342334</span> 订单号:1546456798
            </div>
            
            <div class="Orderlistcontent">
                <el-row>
                <el-col :span="7">
                    <img src="/usericon/personal_tx001.png">
                    <div>
                        <p>柏原先生</p>
                        <p>视频营销</p>
                        <p>原创视频发布</p>
                    </div>
                </el-col>
                <el-col :span="4"><p>价格</p></el-col>
                <el-col :span="4"><p>数量</p></el-col>
                <el-col :span="4"><p>订单状态</p></el-col>
                <el-col :span="5"><p>客服信息</p></el-col>
            </el-row>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    layout:'user'
}
</script>

<style>
.Order{
    background-color: #fff;
}
.Orderheader{
    height: 53px;
}
.Orderheader p{
    float: left;
    height: 52px;
    font-size: 16px;
    line-height: 52px;
    padding: 0 11px;
    margin: 0 16px
}
p.active{
    border-bottom: 2px #5141ED solid;
}
.Orderth{
    height: 36px;
    line-height: 34px;
    font-size: 14px;
    text-align: center;
    background-color: #F8F7FF;
}
.Orderlist{
    height:158px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(210,210,210,1);
    margin-top: 30px;
}
.Orderlist .listheader{
    background-color: #F8F7FF;
    height: 36px;
    line-height: 34px;
    border-bottom: 1px solid #D2D2D2;
}
.Orderlistcontent .el-row > div{
    height: 122px;
    display: flex;
    align-items: center;
    justify-content: center
}
.Orderlistcontent .el-row .el-col img{
    margin-right: 20px
}
.Orderlistcontent .el-row .el-col p:nth-child(2){
    color: #666;
}
</style>
